<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css\swiper-bundle.min.css">
    <link rel="stylesheet" href="css\index.css">
    <link rel="stylesheet" href="css\normalize.css">
    <link rel="stylesheet" href="css\common.css">

</head>

<body>
    <!-- 头部模块 -->
    <header class="navbar">
        <div class="navbar_top">
            <div class="navbar-tool w">
                <ul class="navbar_tools">
                    <li>简体中文</li>
                    <li>登录</li>
                    <li>注册</li>
                </ul>
            </div>
        </div>
        <div class="navbar_menu ">
            <div class="menu_logo">
                <a href="#" id="logo">
                    <img src="img/harmonyOS_logo.png" alt="">
                </a>
            </div>
            <div class="menu_box">
                <ul class="menu_ul">
                    <li>开发</li>
                    <!-- 下拉菜单 -->
                    <div class="second_menu">
                        <div class="second_menu_box_left">
                            <ul>
                                <li class="active_a">
                                    <span title="应用开发 ">应用开发</span>
                                </li>
                                <li class="active_b">
                                    <span title="设备开发 ">设备开发</span>
                                </li>
                            </ul>
                        </div>
                        <div class="second_menu_box_right ">
                            <div class="menu_card_row ">
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <li>活动</li>
                    <!-- 下拉菜单 -->
                    <div class="second_menu">
                        <div class="second_menu_box_left">
                            <ul>
                                <li class="active_a">
                                    <span title="应用开发 ">应用开发</span>
                                </li>
                                <li class="active_b">
                                    <span title="设备开发 ">设备开发</span>
                                </li>
                            </ul>
                        </div>
                        <div class="second_menu_box_right ">
                            <div class="menu_card_row ">
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <li>资讯</li>
                    <!-- 下拉菜单 -->
                    <div class="second_menu">
                        <div class="second_menu_box_left">
                            <ul>
                                <li class="active_a">
                                    <span title="应用开发 ">应用开发</span>
                                </li>
                                <li class="active_b">
                                    <span title="设备开发 ">设备开发</span>
                                </li>
                            </ul>
                        </div>
                        <div class="second_menu_box_right ">
                            <div class="menu_card_row ">
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <li>生态合作</li>
                    <!-- 下拉菜单 -->
                    <div class="second_menu">
                        <div class="second_menu_box_left">
                            <ul>
                                <li class="active_a">
                                    <span title="应用开发 ">应用开发</span>
                                </li>
                                <li class="active_b">
                                    <span title="设备开发 ">设备开发</span>
                                </li>
                            </ul>
                        </div>
                        <div class="second_menu_box_right ">
                            <div class="menu_card_row ">
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <li>开发者社区</li>
                    <!-- 下拉菜单 -->
                    <div class="second_menu">
                        <div class="second_menu_box_left">
                            <ul>
                                <li class="active_a">
                                    <span title="应用开发 ">应用开发</span>
                                </li>
                                <li class="active_b">
                                    <span title="设备开发 ">设备开发</span>
                                </li>
                            </ul>
                        </div>
                        <div class="second_menu_box_right ">
                            <div class="menu_card_row ">
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                                <a href="# ">
                                    <div title="应用开发首页 " class="menu_card_row_a ">应用开发首页</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </ul>
                <div class="btn_search"></div>
            </div>
        </div>

    </header>

    <!-- 轮播图模块 -->
    <div class="banner-C ">
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img\chuangxindasai4.png" alt="">
                    <div class="contentbox ">
                        <h2>HarmonyOS 开发者创新大赛</h2>
                        <p class="desc ">2021.10.22 - 2022.04 一起创造无限可能</p>
                        <p class="btn-group ">
                            <a href="# ">了解更多</a>
                        </p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img\pic_banner_SDK.jpg" alt="">
                    <div class="contentbox ">
                        <h2>HarmonyOS 开发者创新大赛</h2>
                        <p class="desc ">2021.10.22 - 2022.04 一起创造无限可能</p>
                        <p class="btn-group ">
                            <a href="# ">了解更多</a>
                        </p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="img\pic_guanrang_arkUI.jpg" alt="">
                    <div class="contentbox ">
                        <h2>HarmonyOS 开发者创新大赛</h2>
                        <p class="desc ">2021.10.22 - 2022.04 一起创造无限可能</p>
                        <p class="btn-group ">
                            <a href="# ">了解更多</a>
                        </p>
                    </div>
                </div>

            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 功能展示模块 -->
    <div class="banner-inner ">
        <div class="left-title ">
            <h2> HarmonyOS 让分布式成为开发的“乐趣”</h2>
            <p class="left-exp ">
                统一OS，弹性部署
            </p>
            <p class="left-text ">
                <a href="# "> 一套操作系统，满足大大小小所有设备的需求，小到耳机，大到车机，智慧屏，手机等，让不同设备使用同一语言无缝沟通。</a>
            </p>
        </div>
    </div>
    <div class="banner-inner ">
        <div class="left-title ">
            <h2> HarmonyOS 让分布式成为开发的“乐趣”</h2>
            <p class="left-exp ">
                统一OS，弹性部署
            </p>
            <p class="left-text ">
                <a href="# "> 一套操作系统，满足大大小小所有设备的需求，小到耳机，大到车机，智慧屏，手机等，让不同设备使用同一语言无缝沟通。</a>
            </p>
        </div>
    </div>
    <div class="banner-inner ">
        <div class="left-title ">
            <h2> HarmonyOS 让分布式成为开发的“乐趣”</h2>
            <p class="left-exp ">
                统一OS，弹性部署
            </p>
            <p class="left-text ">
                <a href="# "> 一套操作系统，满足大大小小所有设备的需求，小到耳机，大到车机，智慧屏，手机等，让不同设备使用同一语言无缝沟通。</a>
            </p>
        </div>
    </div>
    <!-- 功能简介模块 -->
    <div class="container ">
        <h2> HarmonyOS 让你的应用自由跨端</h2>
        <p class="left-text ">
            HarmonyOS 原子化服务是轻量化服务的新物种，它提供了全新的服务和交互方式，可分可合，可流转，支持免安装等特性，能够让应用化繁为简，让服务触手可及。
        </p>
        <img src="img/zhibo0629.gif " alt=" ">
    </div>
    <div class="container ">
        <h2> HarmonyOS 让你的应用自由跨端</h2>
        <p class="left-text ">
            HarmonyOS 原子化服务是轻量化服务的新物种，它提供了全新的服务和交互方式，可分可合，可流转，支持免安装等特性，能够让应用化繁为简，让服务触手可及。
        </p>
        <img src="img/zhibo0629.gif " alt=" ">
    </div>
    <!-- 底部模块 -->
    <div class="grid ">
        <div class="grid-d8 ">
            <h2>加入生态</h2>
            <div class="content ">
                <div class="item ">
                    <img src="img\Floor6_1_pic_hormonyos_shengtai_yingyong.png " alt=" ">
                    <h3>应用开发</h3>
                    <p>支持轻松调用设备组合中的不同硬件能力、支持多设备无缝协同，为应用开发者带来丰富的体验想象空间。</p>
                </div>
                <div class="item ">
                    <img src="img\Floor6_1_pic_hormonyos_shengtai_yingyong.png " alt=" ">
                    <h3>应用开发</h3>
                    <p>支持轻松调用设备组合中的不同硬件能力、支持多设备无缝协同，为应用开发者带来丰富的体验想象空间。</p>
                </div>
                <div class="item ">
                    <img src="img\Floor6_1_pic_hormonyos_shengtai_yingyong.png " alt=" ">
                    <h3>应用开发</h3>
                    <p>支持轻松调用设备组合中的不同硬件能力、支持多设备无缝协同，为应用开发者带来丰富的体验想象空间。</p>
                </div>
            </div>
        </div>
    </div>
    <script src="js\index.js"></script>
    <script src="js\jquery.min.js"></script>
    <script src="js\swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            // spaceBetween: 30,
            loop: true,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>

</html>